<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="60%"
      :top="`2vh`"
      v-dialogDrag
      :before-close="resetForm"
    >
      <div class="p-d" style="height: 100%">
        <div class="preview-box" v-if="type === 'video'">
          <video
            ref="videoRef"
            id="my-video"
            controls="controls"
            autoplay="autoplay"
          >
            <source :src="form.serverPath" type="video/mp4" />
            <track
              kind="subtitles"
              srclang="zh_CN"
              label="中文"
              src="/mockapi/common/sub?lang=zh_CN"
            />
            <track
              kind="subtitles"
              srclang="en_US"
              label="英文"
              src="/mockapi/common/sub?lang=en_US"
            />
          </video>
        </div>
        <div class="preview-box" v-else-if="type === 'image'">
          <!-- <img width="100%" :src="form.serverPath" alt="" /> -->
          <el-image
            style="width: 100%; height: 100%"
            :src="form.serverPath"
            fit="fill"
          ></el-image>
        </div>

        <div v-else-if="type === 'pdf'" style="height: 100%">
          <iframe
            width="100%"
            height="700px"
            class="preview-box"
            :src="`${form.serverPath}?random=${Math.random()}`"
          ></iframe>
        </div>
        <div v-else>
          <div class="red center">
            <i class="el-icon-warning m-r"></i>（{{
              form.fileName
            }}）文件不支持预览
          </div>
          <EmptyComp
            class="m-t"
            containerH="30vh"
            :emptyConfig="emptyConfig"
            :showActions="false"
          />
          <div class="center" @click="exportFile(form)">
            <el-link type="primary"> 点击下载文件</el-link>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="resetForm()">取 消</el-button>
        <!-- <el-button size="small" type="primary" @click="submitForm()">
          确 定
        </el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { exportVideoOrPicture } from "@/api/common";
export default {
  data() {
    return {
      dialogVisible: false,
      title: "",
      type: "pdf",
      form: {},
      emptyConfig: {
        title: "文件不支持预览",
        imageSvg: "empty",
        width: "20vh",
        height: "20vh",
      },
    };
  },
  methods: {
    exportFile(file) {
      exportVideoOrPicture({ id: file.id });
    },
    showDialog(params) {
      this.dialogVisible = true;
      this.title = params.title;
      this.type = params?.type ?? "pdf";
      this.form = params.row;
    },
    submitForm() {},
    resetForm() {
      this.form = {};
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
#my-video {
  width: 100%;
}
:deep(.preview-box) {
  width: 100%;
  min-height: 100vh;
  .el-image,
  .el-image__error {
    width: 100%;
    min-height: 55vh;
  }
}
</style>
